<template>
    <div class="divBox">
        <div class="selCard">
            <el-form :model="tableFrom" ref="searchForm" size="small" inline label-width="85px">
              <el-form-item label="订单号：">
                <el-input placeholder="请输入订单号" v-model="tableFrom.order_sn" class="input-with-select" @keyup.enter.native="changeSearch()"></el-input>
              </el-form-item>
              <el-form-item label="用户昵称：">
                <el-input placeholder="请输入用户昵称" v-model="tableFrom.nickname" class="input-with-select" @keyup.enter.native="changeSearch()"></el-input>
              </el-form-item>
              <el-form-item label="分类：" prop="cate_id">
                <el-select v-model="tableFrom.cate_id" placeholder="请选择" class="selWidth" clearable @change="getList(1)">
                  <el-option v-for="item in categoryList" :key="item.cate_id" :label="item.cate_name" :value="item.category_id"/>
                </el-select>
              </el-form-item>
              <el-form-item label="活动名称：">
                <el-input placeholder="请输入活动名称" v-model="tableFrom.activity_name" class="input-with-select" @keyup.enter.native="changeSearch()"></el-input>
              </el-form-item>
                <el-form-item label="订单状态：" prop="status">
                    <el-select v-model="tableFrom.status" placeholder="请选择" class="filter-item selWidth" clearable @change="changeSearch()">
                        <el-option label="全部" value="" />
                        <el-option label="待付款" :value="0" />
                        <el-option label="已付款" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" align="right" unlink-panels format="yyyy/MM/dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" class="selWidth" :picker-options="pickerOptions" @change="onchangeTime"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="changeSearch()">搜索</el-button>
                    <el-button size="small" @click="searchReset()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card class="mt14">
            <el-table v-loading="listLoading" :data="tableData.data" size="small" class="table" highlight-current-row>
                <el-table-column label="订单编号" min-width="150">
                    <template slot-scope="scope">
                        <span style="display: block;" v-text="scope.row.order_sn" />
                    </template>
                </el-table-column>
                <el-table-column prop="real_name" label="报名用户" min-width="100" />
                <el-table-column prop="cate_name" label="活动分类" min-width="100" />
                <el-table-column label="活动信息" min-width="330">
                    <template slot-scope="scope">
                        <div class="tabBox acea-row row-middle">
                            <div class="demo-image__preview">
                                <el-image :src="scope.row.order_info.pic" :preview-src-list="[scope.row.order_info.pic]"/>
                            </div>
                            <span class="tabBox_tit">{{ scope.row.order_info.activity_name}}</span>
                            <span class="tabBox_pice">{{ '￥'+ scope.row.order_info.price + ' x 1' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="金额" prop="pay_price" min-width="80"/>
                <el-table-column label="订单状态" min-width="80">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_del === 0">
                            <span v-if="scope.row.paid === 0">待付款</span>
                            <span v-else>已付款</span>
                        </div>
                        <span v-else>已删除</span>
                    </template>
                </el-table-column>
                <el-table-column prop="serviceScore" label="下单时间" min-width="130">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.related && scope.row.related.verify_status == 0" type="text" size="small" @click="handleVerify(scope.row, scope.$index)">核销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination background :page-size="tableFrom.limit" :current-page="tableFrom.page" layout="total, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="pageChange"/>
            </div>
        </el-card>
    </div>
</template>

<script>
import { integralOrderExcelApi, integralOrderDeleteApi } from "@/api/marketing";
import timeOptions from '@/utils/timeOptions';
import { activityCateSelect, activityOrderLstApi, activityOrderVerifyApi } from '@/api/activity'
export default {
    data() {
        return {
            select: "",
            keywords: "",
            orderId: 0,
            tableData: {
                data: [],
                total: 0,
            },
            pickerOptions: timeOptions,
            listLoading: true,
            tableFrom: {
                keywords: "",
                order_sn: "",
                status: "",
                date: "",
                page: 1,
                limit: 20,
                product_id: '',
            },
            timeVal: [],
            ids: "",
            uid: "",
            visibleDetail: false,
            tableFromLog: {
                page: 1,
                limit: 10,
            },
            loading: false,
            dialogVisible: false,
            cardLists: [],
            orderDatalist: null,
            drawer: false,
          categoryList:[]
        };
    },
    watch: {
        '$route.query.id': {
            handler: function(val) {
                this.tableFrom.product_id  = val || ""
                this.getList('');
            },
            immediate: false,
            deep: true
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.tableFrom.product_id = this.$route.query.id;
        } else {
            this.tableFrom.product_id = "";
        }
      this.getCategoryList()
        this.getList('');
    },
    // 被缓存接收参数
    activated() {
        if (this.$route.query.id) {
            this.tableFrom.product_id = this.$route.query.id;
        } else {
            this.tableFrom.product_id = "";
        }
        this.getList('');
    },
    methods: {
      getCategoryList() {
        activityCateSelect()
          .then(res => {
            this.categoryList = res.data
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
        /**重置 */
        searchReset(){
            this.timeVal = []
            this.tableFrom.date = ""
            this.tableFrom.order_sn = ""
            this.tableFrom.nickname = ""
            this.tableFrom.activity_name = ""
            this.keywords = ""
            this.$refs.searchForm.resetFields()
            this.changeSearch()
        },
        /**订单列表 */
        downData(excelData) {
            return new Promise((resolve, reject) => {
                integralOrderExcelApi(excelData).then((res) => {
                    return resolve(res.data)
                })
            })
        },
        // 订单核销
      handleVerify(row, idx) {
            this.$modalSure('确定核销改订单？').then(() => {
              activityOrderVerifyApi(row.order_id).then(({ message }) => {
                this.$message.success(message)
                this.getList('');
              }).catch(({ message }) => {
                this.$message.error(message)
              })
            })
        },
        // 详情
        onOrderDetails(id) {
            this.orderId = id;
            this.$refs.orderDetail.getInfo(id);
            this.drawer = true;
        },
        changeDrawer(v) {
            this.drawer = v;
        },
        closeDrawer() {
            this.drawer = false;
        },
        pageChangeLog(page) {
            this.tableFromLog.page = page;
            this.getList('');
        },
        handleSizeChangeLog(val) {
            this.tableFromLog.limit = val;
            this.getList('');
        },
        // 具体日期
        onchangeTime(e) {
            this.timeVal = e;
            this.tableFrom.date = e ? this.timeVal.join('-') : '';
            this.changeSearch();
        },
        changeSearch(){
            this.resetSearchVal();
            this.getList(1);
        },
        resetSearchVal(){
            this.tableFrom.phone="";
            this.tableFrom.uid="";
            this.tableFrom.keywords="";
        },
        // 列表
        getList(num) {
            this.listLoading = true;
            this.tableFrom.page = num ? num : this.tableFrom.page;
            activityOrderLstApi(this.tableFrom)
                .then((res) => {
                    this.tableData.data = res.data.list;
                    this.tableData.total = res.data.count;
                    this.listLoading = false;
                })
                .catch((res) => {
                    this.$message.error(res.message);
                    this.listLoading = false;
                });
        },
        pageChange(page) {
            this.tableFrom.page = page;
            this.getList('');
        },
        handleSizeChange(val) {
            this.tableFrom.limit = val;
            this.getList('');
        },
    },
};
</script>

<style lang="scss" scoped>
.demo-table-expand ::v-deep label {
    width: 83px !important;

}
::v-deep .el-input-group__prepend .el-input{
    width: 90px;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner{
    padding: 0 10px;
    display: block;
    font-size: 13px;
}
.selWidth {
    width: 260px;
}
.el-dropdown-link {
    cursor: pointer;
    color: var(--prev-color-primary);
    font-size: 12px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
}
::v-deep .row-bg .cell {
    color: red !important;
}
</style>
